<template>
  <div>
    <el-drawer
      v-if="visible"
      class="orderDetail"
      :visible.sync="visible"
      :with-header="false"
      :append-to-body="true"
      size="200px"
    >
      <div class="title">
        <div class="title-text" />
      </div>

      <!-- 左右布局 -->
      <div class="center">
        <!-- 右侧 -->
        <div class="right">
          <div class="timeline-title">一户一码流转信息--申诉号{{ flowInfoData[0].billCode }}</div>
          <el-timeline>
            <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.happendDt, '{y}-{m}-{d} {h}:{i}')} ${item.operator}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <!-- <h4 v-if="!item.marker">{{ `备注:${item.other||''}` }}</h4> -->
                <h4 v-if="item.marker">{{ `${item.marker}` }}：<span style="color: #FC9;">{{ item.other }}</span></h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 底部 -->
      <!-- <div class="demo-drawer__footer" style="padding: 0 10px 10px 0; text-align: right;">
      </div> -->
    </el-drawer>
  </div>
</template>

<script>
  import { queryCommontrac } from '@/api'
  import moment from 'dayjs'
  import { formatColumnMap, parseTime } from '@/utils'
  import { mapGetters } from 'vuex'

  export default {
    name: 'oneHouseOneCodeDetail',
    components: {
    },
    props: {
    },
    data() {
      return {
        moment,
        formatColumnMap,
        parseTime,
        visible1: false,
        visible: false,
        detail: {
          orderStatus: ''
        },
        activeStep: 1,
        specList: [],
        flowInfoData: [], // 流转信息
        distributionWork: {
          userName: ''
        },
        treeData: [],
        score: 4,
        countPrice: 0
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    created() {
    },
    methods: {
      async open(temp) {
        await this.getDetailData(temp)
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getDetailData(temp) {
        const res = await queryCommontrac({ billCode: temp.appealCode, billType: 2048 })
        this.flowInfoData = res.data || []
      }
    }
  }
</script>

<style lang="scss" scoped>
.orderDetail {
  /deep/.el-drawer {
    width: 30% !important;
  }
  .csmDetail {
    /deep/.el-drawer {
      width: 75% !important;
    }
  }
}
/deep/.el-drawer__header {
  padding: 15px 20px;
  margin-bottom: 0;
}
.center {
  display: flex;
  height: calc(100vh - 120px);
  padding: 0 20px;
  overflow-y: auto;
  // height: 700px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
  .left {
    position: relative;
    width: 75%;
    height: 100%;
    padding-right: 40px;
    .doneImg {
      position: absolute;
      top: 80px;
      right: 80px;
      width: 61px;
      height: 61px;
      //background-image: url("../../../../assets/done2.png");
      background-size: 61px 61px;
    }

    .settlement {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 700;
      color: #F54D28;
      text-align: right;
      p {
        margin-bottom: 8px;
      }
      .total-txt {
        font-size: 14px;
        font-weight: 700;
        color: #000;
      }
    }

    .el-table {
      margin-bottom: 20px;
    }

    .el-descriptions {
      margin-bottom: 20px;
    }

    img {
      width: 61px;
      height: 61px;
      margin-left: 80px;
    }
    .steps-box {
      width: 100%;
      padding-top: 25px;
    }
    .client-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .client-table {
        border: 1px solid #e3e3e3;
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-two-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            padding: 10px 0;
            text-align: left;
            flex: 1;
          }
        }
        .table-two-row:last-child {
          border-bottom: none;
        }
      }
    }
    .commodity-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .commodity-table-box {
        border: 1px solid #e3e3e3;
        .table-title {
          background-color: #f1f1f1;
          div {
            display: inline-block;
            width: 19%;
            padding: 10px 0;
            text-align: center;
          }
        }
        .table-value {
          div {
            display: inline-block;
            width: 19%;
            padding: 10px 0;
            text-align: center;
          }
        }
      }
    }
    .cost-box {
      margin-top: 20px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38BDBD;
      }
      .cost-table-box {
        border: 1px solid #e3e3e3;
        .table-title {
          background-color: #f1f1f1;
          div {
            display: inline-block;
            width: 16%;
            padding: 10px 0;
            text-align: center;
          }
        }
        .table-value {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
            width: 16%;
            padding: 10px 0;
            text-align: center;
          }
        }
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-one-row:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .right {
    height: 100%;
    padding-left: 15px;
    border-left: 1px solid #e3e3e3;
    flex: 1;
    .timeline-title {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      color: white;
      background-color: #38BDBD;
      border-radius: 5px;
    }
    // span {
    //   display: block;
    //   height: 24px;
    //   padding-left: 20px;
    //   font-weight: 700;
    //   line-height: 24px;
    //   text-align: center;
    //   background-color: #e3e3e3;
    // }

    .el-timeline {
      margin-top: 20px;
    }
  }
}
.demo-drawer__footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 21%;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
.title {
  display: flex;
  padding: 20px 20px 0 20px;
  // margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
  .tag {
    margin: 0 10px;
  }
}
.label-child {
  position: absolute;
  top: 30px;
  right: 10px;
  width: 90px;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  transform: rotate(50deg);
}
.red {
  background-color: #F56C6C;
  border-color: red;
}
.green {
  background-color: #38BDBD;
  border-color: #1D7471;
}
.csmCode {
  color: #38BDBD;
  cursor: pointer;
}
</style>
